<template>
  <div class="userCenter">
    <!-- <div class="search">
      <el-input placeholder="包裹搜索" v-model="searchValue" class="input-with-select">
        <el-select v-model="searchType" class="selectInput" slot="prepend" placeholder="请选择">
          <el-option label="第三方订单号" value="thirdOrderNo"></el-option>
          <el-option label="发货任务编号" value="orderId"></el-option>
          <el-option label="快递单号" value="logisticsId"></el-option>
          <el-option label="收件人手机" value="receiveTelephone"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="searchPackage"></el-button>
      </el-input>
    </div> -->
    <div class="userBox">
      <div class="left">
        <div class="topRule invitorImgBox" v-if="(userInfo.level == 1) && (sellerInfo.invitorNum - 3 < 0)">
          <img :src="invitorImg" alt="invitor">
          <span class="level1 level">当前等级</span>
          <span class="level2 level">升级成为</span>
          <p class="regUser">
            <span>注册用户</span>
            <strong>
              <i>{{ logisticList.firstPrice }}</i>
              元/单
            </strong>
          </p>
          <p class="vipUser">
            <span>VIP用户</span>
            <strong>
              <i v-if="item.level == 2" v-for="(item, index) in substationPriceList" :key="index">{{ item.firstPrice || '' }}</i>
              元/单
            </strong>
          </p>
          <b class="regLink" @click="copy('.regLink')">
            复制链接邀请注册
          </b>
          <div class="regedBox">
            <strong @click="goWhere('invitorList')">
              <i>{{ sellerInfo.invitorNum }}</i>/3
            </strong>
            <em>
              <b :class="'b' + sellerInfo.invitorNum"></b>
            </em>
            <span>
              还差{{ 3 - sellerInfo.invitorNum }}人
            </span>
          </div>
        </div>
        <div class="topVip invitorImgBox" v-else>
          <img :src="vipInvitorImg" alt="vip">
          <p>
            <span>VIP用户</span>
            <strong>
              <i>{{ logisticList.firstPrice }}</i>
              元/单
            </strong>
          </p>
          <div class="linkBox">
            <strong>您已邀请
              <i @click="goWhere('invitorList')">{{ sellerInfo.invitorNum }}</i> 人注册，请继续邀请好友，会有更多优惠等您。</strong>
            <b class="btnsReg" @click="copy('.btnsReg')">复制链接邀请注册</b>
          </div>
        </div>
        <div class="bottomImg">
          <img :src="onlineImg" @click="goWhere('wishList')" alt="online">
        </div>
        </div>
        <div class="right">
          <div class="topInfo">
            <div class="title">
              <strong>
                <!-- <i class="el-icon-mobile-phone"></i> -->
                <i class="userIcon"></i>
                {{ sellerInfo.userName }}
              </strong>
              <span @click="goWhere('bindShop')">完善资料</span>
            </div>
            <div class="money">
              <span>当前余额</span>
              <strong>{{ sellerInfo.balance }}</strong>
              <b class="button-n" @click="goWhere('accountMoney')">充值</b>
            </div>
          </div>
          <div class="bottomPrice">
            <div class="title">
              <strong>圆通快递</strong>
            </div>
            <ul class="priceList">
              <li>
                <span>区域</span>
                <span>普通地区</span>
              </li>
              <li>
                <span>首重0.5kg内</span>
                <span>{{ logisticList.firstPrice }}元/单</span>
              </li>
              <li>
                <span>0.5-1kg</span>
                <span>{{ logisticList.middlePrice }}元/单</span>
              </li>
              <li>
                <span>1kg续重</span>
                <span>{{ logisticList.endPrice }}元/kg</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="invitorBox" v-if="(userInfo.level == 1) && (userInfo.sellerInviteBindNum - 3 <= 0) && (userInfo.sellerInviteBindNum - 3 <= 0) && 0">
        <div class="nowLevel">
          当前等级：{{ userInfo.levelDetail }}
          <strong>{{ logisticList.firstPrice }} 元 / 单</strong>
        </div>
        <div class="tips">
          邀请
          <b>3人</b>注册并完善信息，免费升级为
          <b>vip用户</b>
          <b v-if="item.level == 2" v-for="(item, index) in substationPriceList" :key="index">（{{ item.firstPrice || '' }} 元 / 单）</b>
        </div>
        <div class="info">
          您已邀请
          <b>{{ userInfo.sellerInviteBindNum }}人</b>注册，其中
          <b>{{ userInfo.sellerInviteBindNum }}人</b>完善信息
          <br> 再邀请
          <b>{{ 3 - userInfo.sellerInviteBindNum - 0 }}人</b>注册并完善信息免费升级为
          <strong>vip用户</strong>
        </div>
        <div class="copyLink">
          <span class="copy button-l" @click="copy('.copy')">复制邀请链接</span>
        </div>
      </div>
      <div class="myPriceBox" v-if="0">
        <div class="left">
          <h4>{{ sellerInfo.userName }}</h4>
          <h6>当前余额：
            <b>{{ sellerInfo.balance }}元</b>
          </h6>
          <div>
            <b class="button-n" @click="goWhere('accountMoney')">充值</b>
            <b class="button-w" @click="goWhere('bindShop')">完善资料</b>
          </div>
        </div>
        <div class="right">
          <div class="title">
            <strong>我的当前等级：{{ userInfo.levelDetail }}</strong>
            <span class="copys" @click="copy('.copys')">☞复制链接邀请好友，获取更多优惠资格☜</span>
          </div>
          <ul class="tables">
            <li>圆通快递</li>
            <li>
              <span>区域 / 重量</span>
              <span>首重0.5KG内</span>
              <span>0.5-1KG</span>
              <span>1KG续重</span>
            </li>
            <li>
              <span>普通地区</span>
              <span>{{ logisticList.firstPrice }} 元 / 单</span>
              <span>{{ logisticList.middlePrice }} 元 / 单</span>
              <span>{{ logisticList.endPrice }} 元 / KG</span>
            </li>
            <li>
              <span>偏远地区</span>
              <span>{{ logisticList.farFirstPrice }} 元 / 单</span>
              <span>{{ logisticList.farMidllePrice }} 元 / 单</span>
              <span>{{ logisticList.farEndPrice }} 元 / KG</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="navTitle">
        <navTitle :navArr="navArr">
          <div class="slots" slot="right">
            <a href="../../../../static/html/video.html" target="_blank" class="text-button-b gift">发货教程</a>
            <b class="button-n" @click="$router.push({name: 'ordersNow'})">立即采购</b>
          </div>
          <!-- <span class="button-w searchBtn" slot="right" @click="searchDetail">
          查询详情
        </span> -->
        </navTitle>
      </div>
      <!-- <ul class="dealOrder">
      <li @click="toStatus(1)">
        <h3>222</h3>
        <span>处理中</span>
      </li>
      <li @click="toStatus(2)">
        <h3>155</h3>
        <span>仓库已发货</span>
      </li>
      <li @click="toStatus(3)">
        <h3>0</h3>
        <span>待退款</span>
      </li>
      <li @click="toStatus(4)">
        <h3>0</h3>
        <span>已退款</span>
      </li>
    </ul> -->
      <div class="orderList">
        <noCont v-if="isEmpty"></noCont>
        <div class="listBox" v-if="!isEmpty">
          <orderListBase :tableData="tableData" @lookDetail="lookDetail" @refresh="search"></orderListBase>
          <div class="pager">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizeArray" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
</template>
<script type="text/ecmascript-6">
import NavTitle from '../../base/navTitle/index'
import NoCont from '../../base/noCont/index'
import OrderListBase from '../orderManger/orderDetail/orderListBase'
import { pageCommon } from '../../../assets/js/mixin.js'
import { mapGetters } from 'vuex'
import ClipboardJS from 'clipboard'
export default {
  name: 'userCenter',
  mixins: [pageCommon],
  components: {
    NavTitle,
    NoCont,
    OrderListBase
  },
  data () {
    return {
      apiUrl: '/api/order/search/getOrderListForSeller',
      searchType: '',
      searchValue: '',
      navArr: ['采购任务'],
      tableData: [],
      inviterUrl: '',
      substationPriceList: [],
      invitorImg: require('@/assets/images/banner_1_1.png'),
      vipInvitorImg: require('@/assets/images/banner_2.png'),
      onlineImg: require('@/assets/images/needGoods.png')
    }
  },
  computed: {
    params () {
      return {
        sellerAccountId: this.userInfo.sellerAccountId,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
    },
    ...mapGetters([
      'userInfo',
      'logisticList',
      'sellerInfo'
    ])
  },
  methods: {
    goWhere (route) {
      this.$router.push({ name: route })
    },
    copy (tar) {
      let bord = new ClipboardJS(tar, {
        text: () => {
          return this.inviterUrl
        }
      })
      bord.on('success', () => {
        this.$message({
          message: '复制成功',
          type: 'success'
        })
      })
    },
    toStatus (status) {
      this.$router.push({ name: 'orderManger', query: { packageStatus: status } })
    },
    setList (data) {
      this.tableData = data
    },
    lookDetail (row) {
      this.$router.push({ name: 'orderManger', query: { orderId: row.orderId } })
    },
    searchPackage () {
      if (this.searchType === '') {
        this.$message({
          message: '请选择查询类型',
          type: 'warning'
        })
      } else if (this.searchValue === '') {
        this.$message({
          message: '请填写搜索号码',
          type: 'warning'
        })
      } else {
        this.$router.push({ name: 'orderManger', query: { [this.searchType]: this.searchValue } })
      }
    },
    getInviterUrl () {
      this.$ajax.post('/api/seller/account/getSellerInvitorUrl', {
        sellerAccountId: this.userInfo.sellerAccountId
      }).then((data) => {
        if (data.data.code === '200') {
          this.inviterUrl = data.data.message
        } else {
          this.$message({
            message: data.data.message,
            type: 'warning'
          })
        }
      }).catch((err) => {
        console.error(err)
        this.$message({
          message: '生意太火爆了, 请稍后再试',
          type: 'error'
        })
      })
    },
    getStationPrice () {
      this.$ajax.post('/api/substation/account/getSubstationSellerLevelLogisticsPriceList', {
        substationId: this.userInfo.substationId,
        logisticsType: '1'
      }).then((data) => {
        if (data.data.code === '200') {
          this.substationPriceList = data.data.data
        } else {
          this.$message({
            message: data.data.message,
            type: 'warning'
          })
        }
      }).catch((err) => {
        console.error(err)
        this.$message({
          message: '生意太火爆了, 请稍后再试',
          type: 'error'
        })
      })
    }
  },
  created () {
    this.getInviterUrl()
    this.getStationPrice()
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.userCenter
  .search
    width 50%
    margin 0 auto
  .selectInput
    width 140px
  .userBox
    display flex
    justify-content space-between
    background #FAFAFA
    .left
      // width 800px
      flex 1
      display flex
      flex-direction column
      justify-content space-between
      .invitorImgBox
        height 200px
        position relative
        border-radius 4px
        overflow hidden
        img
          position absolute
          top 0
          right 0
          left 0
          height 100%
          width 100%
          margin 0 auto
      .topRule
        p
          position absolute
          bottom 15px
          display flex
          flex-direction column
          justify-content center
          align-items center
          span
            font-size 14px
            color #ffffff
            line-height 20px
          strong
            font-size 12px
            color #ffffff
            line-height 20px
            i
              font-size 20px
        .regUser
          left 340px
        .vipUser
          left 577px
          span, strong
            color #FCC94E
        .level
          position absolute
          font-size 12px
          line-height 20px
          color #ffffff
        .level1
          top 76px
          left 345px
        .level2
          top 84px
          left 577px
          color #FCC94E
        .regLink
          position absolute
          right 100px
          bottom 60px
          font-size 12px
          letter-spacing 1px
          width 60px
          line-height 20px
          padding 5px
          color #FCC94E
          border 1px solid #FCC94E
          border-radius 4px
          text-align center
          cursor pointer
        .regedBox
          position absolute
          left 435px
          bottom 50px
          width 100px
          display flex
          flex-direction column
          justify-content center
          align-items center
          strong
            font-size 14px
            line-height 20px
            color #FAC74E
            letter-spacing 2px
            cursor pointer
            i
              font-size 18px
              line-height 20px
          em
            height 8px
            width 100%
            border-radius 4px
            background rgba(0, 0, 0, 0.25)
            margin 2px 0
            position relative
            b
              position absolute
              top 0
              left 0
              height 100%
              width 0
              border-radius 4px
              background url('../../../assets/images/proce.png') repeat
              // background-position 0
              background-size 62px 10px
            .b1
              width 33.33%
            .b2
              width 66.66%
            .b3
              width 100%
          span
            font-size 12px
            line-height 20px
            color #ffffff
      .topVip
        p
          position absolute
          left 455px
          bottom 25px
          display flex
          flex-direction column
          justify-content center
          align-items center
          span
            font-size 16px
            color #FCC94E
            line-height 24px
          strong
            font-size 14px
            color #FCC94E
            line-height 24px
            i
              font-size 24px
        .linkBox
          position absolute
          right 80px
          bottom 20px
          width 135px
          padding 10px
          border-radius 5px
          border 1px dashed #ffffff
          display flex
          flex-direction column
          justify-content center
          align-items center
          strong
            font-size 12px
            color #ffffff
            line-height 24px
            letter-spacing 1px
            i
              cursor pointer
          b
            text-align center
            padding 5px
            width 65px
            line-height 20px
            font-size 14px
            color #ffffff
            border-radius 4px
            background #F65B62
            margin-top 12px
            cursor pointer
      .bottomImg
        position relative
        height 100px
        margin-top 10px
        overflow hidden
        border-radius 4px
        img
          position absolute
          top 0
          left 0
          width 100%
          height 100%
          cursor pointer
    .right
      width 260px
      margin-left 10px
      >div
        box-shadow 0 3px 6px RGBA(0, 0, 0, 0.04)
        background #ffffff
      .title
        line-height 30px
        display flex
        justify-content space-between
        border-bottom 1px solid #eeeeee
        padding 0 10px
        strong
          font-size 14px
          color #333333
          font-weight bold
          i
            margin-right 5px
        span
          font-size 12px
          color #333333
          transition all 0.2s
          cursor pointer
          &:hover
            color $buttonBg
      .topInfo
        .money
          display flex
          flex-direction column
          align-items center
          padding 15px
          span
            font-size 14px
            color #666666
            line-height 20px
          strong
            font-size 30px
            color #333333
            line-height 35px
            font-weight bold
          b
            margin-top 16px
      .bottomPrice
        margin-top 10px
        .priceList
          padding 10px
          li
            margin-bottom 8px
            display flex
            justify-content space-between
            font-size 12px
            color #666666
            line-height 14px
  .invitorBox
    // margin-top 40px
    background url('../../../assets/images/invitor.jpg') no-repeat
    background-size 100% 100%
    padding 30px 50px
    text-align center
    color #ffffff
    font-family sans-serif
    .nowLevel
      width 40%
      margin 0 auto
      font-size 20px
      line-height 30px
      strong
        color #FFF100
    .tips
      font-size 28px
      margin 20px 0
      font-weight bold
      b
        font-size 28px
        color #FFF100
        font-weight bold
    .info
      width 50%
      margin 0 auto
      padding 10px 20px
      font-size 18px
      color #ffffff
      line-height 30px
      border 1px dashed rgba(255, 255, 255, 0.6)
      background rgba(0, 0, 0, 0.3)
      b
        color #FFF100
        text-decoration underline
      strong
        color #FFF100
    .copyLink
      margin-top 20px
      .copy
        width 250px
        line-height 50px
        border-radius 25px
        font-weight bold
        background #FFF100
        color #7320D3
  .myPriceBox
    margin-top 40px
    display flex
    align-items center
    .left
      width 350px
      color #ff3341
      text-align center
      h4
        font-size 20px
        font-weight bold
      h6
        font-size 16px
        margin 12px 0
        b
          font-size 18px
    .right
      flex 1
      color #ff3341
      .title
        display flex
        justify-content space-between
        strong
          font-size 18px
        span
          font-size 14px
          line-height 16px
          cursor pointer
      .tables
        border 1px solid #999999
        font-size 14px
        line-height 30px
        text-align center
        margin-top 12px
        li
          border-bottom 1px solid #999999
          display flex
          justify-content center
          span
            flex 1
            border-right 1px solid #999999
            &:last-child
              border none
          &:last-child
            border none
  .navTitle
    margin-top 40px
    .gift
      color #888888
      font-size 14px
    .slots
      a
        text-decoration none
  .dealOrder
    display flex
    margin-top 20px
    li
      flex 1
      text-align center
      padding 20px 0
      cursor pointer
      transition all 0.2s
      &:hover
        background rgba(60, 190, 255, 0.8)
      h3
        font-size 22px
        color #ff3341
        font-weight bold
        margin-bottom 20px
      span
        font-size 16px
        color #999999
  .orderList
    margin-top 20px
.userIcon
  display inline-block
  width 14px
  height 14px
  background url('../../../assets/icon/mine_icon.png') no-repeat
  background-size 100% 100%
</style>
